<!DOCTYPE html>
<html>
    <head>
        <title>导出页面</title>

        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
        <link type="text/css" rel="stylesheet" href="/dist/admin/css/skins/jedate.css">
        <style>
            html, body {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                width: 100%;
                display: table;
                font-weight: 100;
                font-family: 'Lato';
            }

            .container {
                /*text-align: center;*/
                display: table-cell;
                vertical-align: super;
            }

            .content {
                text-align: left;
                display: inline-block;
            }

            .title {
                font-size: 96px;
            }
            ul{list-style:none;}
            li{float:left;}
            input,label{
                vertical-align:middle;
            }
        </style>
        <script src="/dist/admin/plugins/jQuery/jQuery-2.1.4.min.js"></script>
        {{--<script type="text/javascript" src="/dist/admin/js/jedate.js"></script>--}}
        {{--<script type="text/javascript" src="/dist/admin/js/jeDate-test.js"></script>--}}
    </head>
    <body>
        <div class="container">
            <div class="content">
                <table>
                    <tr>
                        <td>
                            <ul>
                                <li>
                                    <label for="yselect">年选择</label>
                                    <select id="yselect"><option value=""></option></select>
                                    <label for="mselect">月选择</label>
                                    <select id="mselect"><option value=""></option></select>
                                </li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td>
                <ul id="list">
                    @foreach($sites as $site)
                    <li><label><input type="checkbox" name = 'id' value={{$site->id}}> {{$site->name}}</label></li>
                    @endforeach
                </ul>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ul>
                                <li>
                <input type="checkbox" id="all">
                <input type="button" value="全选" class="btn" id="selectAll">
                <input type="button" value="全不选" class="btn" id="unSelect">
                <input type="button" value="反选" class="btn" id="reverse">
                <input type="button" value="提交" class="btn" id="getValue">
                                    </li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <script>
            $(function () {
                //全选或全不选
                $("#all").click(function(){
                    if(this.checked){
                        $("#list :checkbox").prop("checked", true);
                    }else{
                        $("#list :checkbox").prop("checked", false);
                    }
                });
                //全选
                $("#selectAll").click(function () {
                    $("#list :checkbox,#all").prop("checked", true);
                });
                //全不选
                $("#unSelect").click(function () {
                    $("#list :checkbox,#all").prop("checked", false);
                });
                //反选
                $("#reverse").click(function () {
                    $("#list :checkbox").each(function () {
                        $(this).prop("checked", !$(this).prop("checked"));
                    });
                    allchk();
                });

                //设置全选复选框
                $("#list :checkbox").click(function(){
                    allchk();
                });

                //获取选中选项的值
                $("#getValue").click(function(){
//                    $("#list:checkbox[checked]").each(function(i){
//                        alert(2);
////                         var s =$(this).val();
////                         alert(s);
//                    });
                    obj = document.getElementsByName('id');
                    check_val = [];
                    for (k in obj){
                        if(obj[k].checked){
                            check_val.push(obj[k].value);
                        }
                    }
                    var val = check_val.join(',')
                    var yselect = document.getElementById("yselect").value;
                    var mselect = document.getElementById("mselect").value;
                    if(!yselect){
                        alert("请选择年")
                        return;
                    }
                    if(!mselect){
                        alert("请选择月")
                        return;
                    }
                    if(val) {
//                        $.post('/get-export-data', {'date': val}, function (data) {
//                            if (data.status) {
//
//                            } else {
//
//                            }
//                        })
                        window.open('/get-export-data?date=' + val+'&year='+yselect+'&month='+mselect);
                    }else{
                        alert('请选择电站');
                    }
                });
            });
            function allchk(){
                var chknum = $("#list :checkbox").size();//选项总个数
                var chk = 0;
                $("#list :checkbox").each(function () {
                    if($(this).prop("checked")==true){
                        chk++;
                    }
                });
                if(chknum==chk){//全选
                    $("#all").prop("checked",true);
                }else{//不全选
                    $("#all").prop("checked",false);
                }
            }

        </script>
        {{--<script type="text/javascript" src="/dist/admin/js/demoDate.js"></script>--}}
        <script>
            var YearSelect = document.querySelector("#yselect");
            var myDate = new Date();
            var year = myDate.getFullYear().toString();
            for (var i = year;i>2010;i--){
                var tmpElement = document.createElement("option");
                tmpElement.value = i;
                tmpElement.id = "yoption" + i;
                tmpElement.innerText = i;
                YearSelect.appendChild(tmpElement);
            }
            var MonthSelect = document.querySelector("#mselect");
            for(var i = 12 ;i >0;i--){
                var tmpElement = document.createElement('option');
                tmpElement.value = i;
                tmpElement.id = "moption" + i;
                tmpElement.innerText = i;
                MonthSelect.appendChild(tmpElement);
            }
        </script>


    </body>

</html>
